<style lang='scss' scoped>
@import '@/assets/css/index';
.game10 {
	@include page();
	.wrapper{
		display: flex;
    flex-direction: column;
    flex:1;
		.contentBox{
			@include contentBox();
      .nine{
        position: absolute;
        width: 90px !important;
        height: 100px !important;
        bottom: 62%;
        right: 10%;
        z-index: 99;
      }
      .four{
        position: absolute;
        width: 90px !important;
        height: 100px !important;
        bottom: 16%;
        left: 8%;
      }
      .five{
        position: absolute;
        width: 70px !important;
        height: 90px !important;
        bottom: 57%;
        left: 12%;
      }
      .two{
        position: absolute;
        width: 70px !important;
        height: 100px !important;
        top: 43%;
        left: 36%;
        z-index: 10;
      }
      .zero{
       position: absolute;
        width: 90px !important;
        height: 100px !important;
        bottom: 16%;
        left: 67%;
        z-index: 11;
      }
		}
	}
}

</style>
<template>
  <div class="game10" ref="game">
		<div class="wrapper">
			<myheader :passInfo="passInfo"></myheader>
			<div class="contentBox">
        <!-- <div class="inputBox" ref="inputBox" :style="{left:zsMarginLeft+'px'}">
          <div v-if="showText">请输入整数</div>
          <input type="text" ref="inputhearNum" v-model="hearNum" v-on:keyup="inputTargetValue" placeholder="请输入整数" @blur="blurInput">
        </div> -->
        <img @click="getImageInfo($event)"  class="five" ref="five"
					src="../../../assets/img/g10/five.png">
          <img @click="getImageInfo($event)"  class="nine" ref="nine"
					src="../../../assets/img/g10/nine.png">
          <img @click="getImageInfo($event)"   class="two" ref="two"
					src="../../../assets/img/g10/two.png">
          <img @click="getImageInfo($event)" class="four" ref="four"
					src="../../../assets/img/g10/four.png">
          <img @click="getImageInfo($event)"  class="zero" ref="zero"
					src="../../../assets/img/g10/zero.png">
			</div>
		</div>
  </div>
</template>

<script>
import myheader from './header2.vue'
import {mapState} from 'vuex'
export default {
  name: 'game3',
  components: {
		myheader
  },
  data() {
    return {
      arrList: [],
      hearNum: '',
      showText:true,
      coordinate: {
        client:{},
        elePosition: {},
      },
      zsMarginLeft: 10,
      nineMarginLeft: 10,
      marginLeft: 10,
      passInfo:''
    }
  },
  created () {
    this.$store.commit("setIsPass",false)
    //在页面链接中获取到当前是第几关
    const ji = this.$route.query.ji
    this.passInfo = {
      ji:ji,
      text: '8由哪两个数字组成',
      tip: '点击两次0'
    }
    document.title = `第${ji}关`
  },
  computed: {
    ...mapState(['fivepass'])
  },
  mounted() {
    
    console.log("this.$route.query.ji",this.$route.query.ji)

    // this.setninePosition()
    // this.setRenPosition()
    // this.setInputBoxPosition()  
  },
  methods: {
    getImageInfo(e) {
      const right = 'zero'
      console.log(e.target.className)
      this.arrList.push(e.target.className)
      console.log(this.arrList)
      this.arrList.forEach((item, index) => {
        console.log(this.arrList[index])
        if(this.arrList[index] == this.arrList[index+1] && this.arrList[index+1] == 'zero') {
          // alert('good')
          this.arrList = []
          this.$store.commit("setIsPass",true)
        }
      })
    },
    clickInputBox() {
      this.showText = false
      this.$refs.inputhearNum.focus
    },
    inputTargetValue: function(e){
      console.log(e.target.value)
      this.hearNum = e.target.value
    },
    changeInput(e) {
      console.log(e,this.hearNum)
    },
    input(e) {
      // console.log(e)
    },
    blurInput() {
      console.log("blurInput")
      if(this.hearNum==16){
        // 通过关卡
        this.$store.commit("setIsPass",true)
        // console.log("isPass",this.$store.state.isPass)
        // alert("答对了!")
      }else{
        alert("答案不对!")
      }
    },
    touchstartHandle(refName, e) {
			// 阻止事件冒泡到DOM树上
    	e.stopPropagation();
		  let element = e.targetTouches[0]
		  // 记录点击的坐标
		  this.coordinate.client = {
			  x: element.clientX,
			  y: element.clientY
		  }
		  // 记录需要移动的元素坐标
		  this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
		  this.coordinate.elePosition.top = this.$refs[refName].offsetTop
	  },
    touchmoveHandle(refName, e) {
			// 阻止事件冒泡到DOM树上
    	e.stopPropagation();
		  let element = e.targetTouches[0]
		  // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
		  let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
		  let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
		  // 限制可移动距离，不超出可视区域
		  x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
		  y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
		  // 移动当前元素
		  this.$refs[refName].style.left = x + 'px'
		  this.$refs[refName].style.top = y + 'px'
	  },
    setninePosition() {
      const element = this.$refs["nine"]
      // master_pic 宽高
      const width = element.clientWidth
      const height = element.clientHeight
      console.log(width,height)
      // 屏幕宽度
      const screenWidth = window.screen.width
      console.log('screenWidth',screenWidth)
      const marginLeft = (screenWidth - width)/2
      console.log('marginLeft',marginLeft)
      this.nineMarginLeft = marginLeft
    },
    setRenPosition() {
      const element = this.$refs["master_pic"]
      // master_pic 宽高
      const width = element.clientWidth
      const height = element.clientHeight
      console.log(width,height)
      // 屏幕宽度
      const screenWidth = window.screen.width
      console.log('screenWidth',screenWidth)
      const marginLeft = (screenWidth - width)/2
      console.log('marginLeft',marginLeft)
      this.marginLeft = marginLeft
    },
    setInputBoxPosition() {
      const element = this.$refs["inputBox"]
      console.log('setInputBoxPosition',element)
      // master_pic 宽高
      const width = element.clientWidth
      const height = element.clientHeight
      console.log(width,height)
      // 屏幕宽度
      const screenWidth = window.screen.width
      console.log('screenWidth',screenWidth)
      const marginLeft = (screenWidth - width)/2
      console.log('zsMarginLeft',marginLeft)
      this.zsMarginLeft = marginLeft
    },
	  clickMasterPic(e) {
      console.log(e.layerX,e.layerY)
        if(e.layerX>=this.coordinate.targetScope.x[0]&&e.layerX<=this.coordinate.targetScope.x[1]){
          if(e.layerY>=this.coordinate.targetScope.y[0]&&e.layerY<=this.coordinate.targetScope.y[1]){
            // 通过关卡
            this.$store.commit("setIsPass",true)
            console.log("isPass",this.$store.state.isPass)
          }  
        }
    }
	}
}
</script>
